/*
  学习目标：react路由小结
  1. 什么是路由：根据当前的 路径，渲染对应的组件
  2. 实现原理： 监听当前路径变化(hashchange / popstate)，把变化后的路径储存，并且渲染出对应的组件
  3. react路由 - 核心组件
    1. HashRouter / BrowserRouter : 创建路由实例，所有路由相关的内容，都要写在它里面
      使用建议：import引进的时候，直接通过as重名名为 Router

    2. Link / NavLink ：实现路由的跳转，底层会帮我们处理好hash或者history的模式，不要我们再自己处理#
    区别：NavLink会自动帮我们添加高亮类名(默认active), 可以通过activeClassName自定义类名

    3. Route：单个路由页面, path代表要匹配的路径, component代表路径对应的组件

    4. Switch：在匹配Route时，匹配到了，就停止下面的匹配
        要实现404页面，在 Switch 最后添加一个404组件，并且通配所有路径(1. path='/',2.直接不写 path)

    5. Redirect：重定向， from代表要匹配的路径，to代表要重定向的路径
      建议使用：💥💥一般写在Switch的第一位，加上 exact 精准匹配，否则每次进来都是 Redirect 匹配上了，页面没内容

    6. 编程式跳转：等价于vue - this.$router.push()
      1. 只有被 Route 组件包装过的，props上就会有 history 和 match 属性
        history可以实现跳转，常见
          history.push('/home') 增加历史记录跳转
          history.replace('/home')  替换当前页面跳转
          history.goBack()  后退一页
          history.go(num) 前进/后退多少页

        如果用了动态路由，可以在 match 中获取对应的参数
        props.match.params.id

    动态路由：跟vue类似
    1. 配置路径 path='/home/:id'
    2. 跳转时一定要带上参数 to="/home/123456"，否则路径都匹配不上
    3. 可以在 match 中获取对应的参数


    特别注意，
    💥💥💥模糊匹配： 路径 包含了 to/path 的属性
      例如：
      1. ✅路径为/home,       to="/home"
      2. ✅路径为/home/test,  to="/home"
      3. ❌路径为/home,       to="/home/test"
    精准匹配： 路径 全等于 to/path 的属性

    💥💥💥路由的匹配规则
      1. 默认是模糊匹配，从上到下，符合条件都渲染
      2. 各自有各自的规则，互不干扰
*/
